<template>
  <div>
    <h3 style="margin-bottom: 12px;">属性编辑</h3>

    <div v-if="selected">
      <!-- 文本输入 -->
      <div v-if="selected.type === 'VText'">
        <t-input v-model="selected.props.modelValue" placeholder="请输入文本" />
      </div>

      <!-- 图片 -->
      <div v-if="selected.type === 'Picture'" style="margin-top: 12px;">
        <t-input v-model="selected.props.src" placeholder="图片链接" />
      </div>

      <!-- 按钮 -->
      <div v-if="selected.type === 'Button'" style="margin-top: 12px;">
        <t-input v-model="selected.props.content" placeholder="按钮文字" />
      </div>

      <!-- 下拉选择 -->
      <div v-if="selected.type === 'Select'" style="margin-top: 12px;">
        <t-input v-model="selected.props.placeholder" placeholder="占位符" class="mb-2" />

        <h4 style="margin-top: 8px;">选项列表</h4>
        <div v-for="(opt, index) in selected.props.options" :key="index" class="option-row">
          <t-input v-model="opt.label" placeholder="选项名称" class="option-input" />
          <t-input v-model="opt.value" placeholder="选项值" class="option-input" />
          <t-button theme="danger" size="small" @click="removeOption(index)">删除</t-button>
        </div>
        <t-button theme="primary" size="small" @click="addOption">新增选项</t-button>
      </div>

      <!-- 多选框组 -->
      <div v-if="selected.type === 'CheckboxGroup'" style="margin-top: 12px;">
        <h4>勾选项列表</h4>
        <div v-for="(opt, index) in selected.props.options" :key="index" class="option-row">
          <t-input v-model="opt.label" placeholder="名称" class="option-input" />
          <t-input v-model="opt.value" placeholder="值" class="option-input" />
          <t-button theme="danger" size="small" @click="removeOption(index)">删除</t-button>
        </div>
        <t-button theme="primary" size="small" @click="addOption">新增选项</t-button>
      </div>

      <!-- 🔹 导航菜单 NavMenu -->
      <div v-if="selected.type === 'NavMenu'" style="margin-top: 12px;">
        <h4>菜单项</h4>
        <div v-for="(item, index) in selected.props.options" :key="index" class="option-row">
          <t-input v-model="item.label" placeholder="菜单标题" class="option-input" />
          <t-input v-model="item.value" placeholder="菜单值" class="option-input" />
          <t-button theme="danger" size="small" @click="removeOption(index)">删除</t-button>
        </div>
        <t-button theme="primary" size="small" @click="addOption">新增菜单项</t-button>
      </div>

    <!-- 🔹 Tabs / SideNav 编辑 -->
    <div v-if="selected.type === 'Tabs' || selected.type === 'SideNav'" style="margin-top: 12px;">
      <h4>标签页</h4>
      <div
        v-for="(panel, index) in selected.slots?.default || []"
        :key="index"
        class="option-row"
      >
        <t-input
          v-model="panel.props.label"
          placeholder="标签标题"
          class="option-input"
        />
        <t-input
          v-model="panel.props.value"
          placeholder="标签值"
          class="option-input"
        />
        <t-button
          theme="danger"
          size="small"
          @click="removeSlot(index)"
        >删除</t-button>
      </div>
      <t-button theme="primary" size="small" @click="addSlot">新增标签</t-button>
    </div>

    <!-- 🔹 Swiper 轮播图编辑 -->
    <div v-if="selected.type === 'Swiper'" style="margin-top: 12px;">
      <h4>轮播项</h4>
      <div
        v-for="(item, index) in selected.slots?.default || []"
        :key="index"
        class="option-row"
      >
        <t-input
          v-model="item.props.content"
          placeholder="轮播图内容"
          class="option-input"
        />
        <t-button
          theme="danger"
          size="small"
          @click="removeSwiperItem(index)"
        >删除</t-button>
      </div>
      <t-button
        theme="primary"
        size="small"
        @click="addSwiperItem"
      >新增轮播项</t-button>
    </div>



    </div>

    <div v-else>未选中任何组件</div>
  </div>
</template>

<script setup>
import { TabPanel, SwiperItem } from 'tdesign-vue-next'

const props = defineProps({
  selected: Object,
})

/** Select / CheckboxGroup / NavMenu 的 option 添加 */
const addOption = () => {
  if (!props.selected?.props?.options) {
    props.selected.props.options = []
  }
  props.selected.props.options.push({ label: '', value: '' })
}

/** 删除 option */
const removeOption = (index) => {
  props.selected.props.options.splice(index, 1)
}

/** 新增导航项 */
const addSlot = () => {
  if (!props.selected.slots) props.selected.slots = { default: [] }
  else if (!props.selected.slots.default) props.selected.slots.default = []

  props.selected.slots.default.push({
    component: TabPanel,
    props: { value: `tab${Date.now()}`, label: '新标签' },
  })
}

/** 删除导航项 */
const removeSlot = (index) => {
  if (!props.selected.slots?.default) return
  props.selected.slots.default.splice(index, 1)
}


/** 新增轮播项 */
const addSwiperItem = () => {
  if (!props.selected.slots) props.selected.slots = { default: [] }
  else if (!props.selected.slots.default) props.selected.slots.default = []

  props.selected.slots.default.push({
    component: SwiperItem,
    props: { content: `轮播图${Date.now()}` },
  })
}

/** 删除轮播项 */
const removeSwiperItem = (index) => {
  if (!props.selected.slots?.default) return
  props.selected.slots.default.splice(index, 1)
}

</script>

<style scoped>
.mb-2 {
  margin-bottom: 8px;
}
.option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.option-input {
  flex: 1;
}
</style>
